<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-100 via-gray-100 to-pink-100">
    <div class="container mx-auto px-4 py-8">
      <h1 class="text-3xl font-extrabold text-center mb-6 text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-pink-500">
        策略表管理
      </h1>
      
      <!-- 策略表列表 -->
      <div class="bg-white rounded-xl shadow-md p-6 mb-6">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-xl font-bold text-gray-800">策略表列表</h2>
          <button 
            @click="showAddForm = true"
            class="px-3 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition"
          >
            创建新策略表
          </button>
        </div>
        
        <div v-if="loading" class="flex justify-center my-6">
          <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
        </div>
        
        <div v-else-if="strategyTables.length === 0" class="text-center my-6 text-gray-500">
          暂无策略表，请创建一个新策略表
        </div>
        
        <div v-else class="overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">策略表名称</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">规则数量</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">更新时间</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">默认</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              <tr v-for="table in strategyTables" :key="table.id" class="hover:bg-gray-50">
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ table.id }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ table.name }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ table.description || '无描述' }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ table.table_data ? table.table_data.length : 0 }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ table.updated_at }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  <span v-if="table.is_default" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                    默认
                  </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 space-x-2">
                  <button 
                    @click="editTable(table)"
                    class="text-blue-600 hover:text-blue-800 font-medium"
                  >
                    编辑
                  </button>
                  <button 
                    v-if="!table.is_default"
                    @click="setAsDefault(table.id)"
                    class="text-green-600 hover:text-green-800 font-medium"
                  >
                    设为默认
                  </button>
                  <button 
                    v-if="!table.is_default"
                    @click="confirmDelete(table)"
                    class="text-red-600 hover:text-red-800 font-medium"
                  >
                    删除
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      
      <!-- 添加/编辑表单弹窗 -->
      <div v-if="showAddForm || showEditForm" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-xl shadow-xl p-6 w-11/12 max-w-4xl max-h-[90vh] overflow-y-auto">
          <h2 class="text-xl font-bold text-gray-800 mb-4">
            {{ showEditForm ? '编辑策略表' : '创建新策略表' }}
          </h2>
          
          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">策略表名称</label>
              <input 
                v-model="currentTable.name" 
                type="text" 
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                placeholder="输入策略表名称"
              >
            </div>
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">描述</label>
              <textarea 
                v-model="currentTable.description" 
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                placeholder="策略表描述（可选）"
                rows="2"
              ></textarea>
            </div>
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">策略内容</label>
              <div class="relative">
                <textarea 
                  v-model="currentTable.strategy_content" 
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono"
                  placeholder="请输入策略内容，每行一条规则，格式如：+1000:1000"
                  rows="15"
                ></textarea>
                <div class="absolute right-2 bottom-2 text-xs text-gray-500">
                  {{ currentTable.strategy_content ? currentTable.strategy_content.split('\n').filter(line => line.trim() && !line.startsWith('#')).length : 0 }} 条规则
                </div>
              </div>
              
              <div class="mt-2 text-sm text-gray-600">
                <p>格式说明:</p>
                <ul class="list-disc pl-5 mt-1 space-y-1">
                  <li><code>+1000:1000</code> - 如果上局赢了1000，本局下注1000</li>
                  <li><code>-2000:3000</code> - 如果上局输了2000，本局下注3000</li>
                  <li><code>+2000,+2000,+2000:1000</code> - 如果连续三局赢了2000，本局下注1000</li>
                  <li><code>+2000/+3000/+4000:1000</code> - 如果上局赢了2000或3000或4000，本局下注1000</li>
                  <li>使用 <code>#</code> 添加注释</li>
                </ul>
              </div>
            </div>
            
            <div class="flex items-center">
              <input 
                type="checkbox" 
                id="defaultTable" 
                v-model="currentTable.is_default"
                class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
              >
              <label for="defaultTable" class="ml-2 text-sm text-gray-700">设为默认策略表</label>
            </div>
          </div>
          
          <div class="flex justify-end space-x-3 mt-6">
            <button 
              @click="closeForm" 
              class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400"
            >
              取消
            </button>
            <button 
              @click="saveTable" 
              class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
            >
              保存
            </button>
          </div>
        </div>
      </div>
      
      <!-- 删除确认弹窗 -->
      <div v-if="showDeleteConfirm" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-xl shadow-xl p-6 w-11/12 max-w-md">
          <h2 class="text-xl font-bold text-gray-800 mb-4">确认删除</h2>
          <p class="text-gray-600 mb-6">
            您确定要删除策略表 "{{ tableToDelete.name }}" 吗？此操作无法撤销。
          </p>
          
          <div class="flex justify-end space-x-3">
            <button 
              @click="showDeleteConfirm = false" 
              class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400"
            >
              取消
            </button>
            <button 
              @click="deleteTable" 
              class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600"
            >
              删除
            </button>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</template>

<script>
import api from '../logic/api'

export default {
  name: 'BetStrategyTablesPage',
  data() {
    return {
      strategyTables: [],
      loading: true,
      showAddForm: false,
      showEditForm: false,
      showDeleteConfirm: false,
      currentTable: {
        name: '',
        description: '',
        table_data: [],
        strategy_content: '',
        is_default: false
      },
      tableToDelete: null
    }
  },
  mounted() {
    this.fetchStrategyTables()
  },
  methods: {
    async fetchStrategyTables() {
      this.loading = true
      try {
        const data = await api.betStrategyTables.getAll()
        this.strategyTables = data
      } catch (error) {
        console.error('获取策略表列表异常', error)
        alert('获取策略表列表异常: ' + error.message)
      } finally {
        this.loading = false
      }
    },
    
    editTable(table) {
      this.currentTable = JSON.parse(JSON.stringify(table)) // 深拷贝
      this.showEditForm = true
    },
    
    confirmDelete(table) {
      this.tableToDelete = table
      this.showDeleteConfirm = true
    },
    
    async deleteTable() {
      try {
        await api.betStrategyTables.delete(this.tableToDelete.id)
        await this.fetchStrategyTables()
        this.showDeleteConfirm = false
        this.tableToDelete = null
      } catch (error) {
        console.error('删除策略表异常', error)
        alert('删除策略表异常: ' + error.message)
      }
    },
    
    async setAsDefault(id) {
      try {
        await api.betStrategyTables.setDefault(id)
        await this.fetchStrategyTables()
      } catch (error) {
        console.error('设置默认策略表异常', error)
        alert('设置默认策略表异常: ' + error.message)
      }
    },
    
    closeForm() {
      this.showAddForm = false
      this.showEditForm = false
      // 重置表单
      this.currentTable = {
        name: '',
        description: '',
        table_data: [],
        strategy_content: '',
        is_default: false
      }
    },
    
    async saveTable() {
      // 验证必填字段
      if (!this.currentTable.name) {
        alert('策略表名称不能为空')
        return
      }
      
      // 验证策略内容
      if (!this.currentTable.strategy_content) {
        alert('策略内容不能为空')
        return
      }
      
      try {
        if (this.showEditForm) {
          await api.betStrategyTables.update(this.currentTable.id, this.currentTable)
        } else {
          await api.betStrategyTables.create(this.currentTable)
        }
        
        await this.fetchStrategyTables()
        this.closeForm()
      } catch (error) {
        console.error('保存策略表异常', error)
        alert('保存策略表异常: ' + error.message)
      }
    }
  }
}
</script> 